<!-- 商品详情 -->
<template>
    <!-- 头部轮播图 -->
    <div class="details">
        <van-swipe :autoplay="3000" :height="250">
            <van-swipe-item v-for="(image, index) in detailsImgs" :key="index">
                <img v-if="image.imgUrl" :src="image.imgUrl" style="width: 100%;" />
            </van-swipe-item>
        </van-swipe>
    </div>
    <div class="d_v1">
        <p style="color: red; font-size: 25px;">西瓜<van-icon name="like-o"
                style="float: right; margin-right: 10px;"></van-icon></p>
        <p style="font-size: 15px; color: rgb(182, 179, 179);">精品西瓜<a
                style="float: right; font-size: 10px;">月销8000</a></p>
    </div>
    <div class="d_v2">
        <img src="src/assets/sort/tx1.jpg" class="store-header" />
        <p class="store-name">邻家小铺</p>
        <van-button size="small" type="danger" class="jin">进店逛逛</van-button>
    </div>
    <div class="item-details">
        <span>商品详情</span>
        <img src="src/assets/home/home5.jpg" style="width: 100%; padding-top: 10px;" />
    </div>
    <div class="product-footer">
        <van-button style="width: 50%;" type="warning" text="加入购物车" />
        <van-button style="width: 50%;" type="danger" text="立即购买" />
    </div>
    <div style="height: 100px;"></div>
</template>
<script setup lang="ts">
import { reactive } from "vue";
// 轮播图数据
const detailsImgs = reactive(
    [
        {
            id: 1,
            imgUrl: 'src/assets/home/home17.jpg'
        }
    ]
)
</script>
<style lang="scss" scoped>
.details {
    width: 100%;
}

.d_v1 {
    margin: 20px 20px;
}

.d_v2 {
    margin: 0 20px;
    border-top: solid 1px rgb(177, 172, 172);
    height: 80px;
    line-height: 80px;

    .store-header {
        width: 40px;
        height: 40px;
        // padding-left: 20px;
        // border-radius: 50%;
    }

    .store-name {
        display: inline-block;
        font-size: 18px;
        padding-left: 10px;
        padding-top: -20px;
    }

    .jin {
        float: right;
        margin-top: 25px;
        // margin-right: 30px;
    }
}

.item-details {
    text-align: center;
    font-size: 16px;
    color: #3a3a3a;

    span {
        box-shadow: 1px -10px 1px -4px rgba(254, 77, 109, 0.5) inset;
    }
}
</style>